import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Modal, Image, TextInput } from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';
import { API, API_GENERATE } from '../../../../../config/api';
import HTTP from '../../../../../utils/http'
const scale = GLOBAL.SCALE;

//驳回弹框
export class DelayModel extends Component {

	constructor(props) {
		super(props);
		this.state = {
			modalSelect:false,
			selectVal:'',
			selectTypes:[],
			modeIndex:0
		}
	}
	
	async componentWillMount(){
		await this.getSelect();
	}

	async  getSelect () {
		let selectTypes = await HTTP.GET(API_GENERATE(API.GET_DATA_DICTIONARY), { dictTypeCode: "FIN_OVERDUE_REASON" });
		console.log(selectTypes)
		this.setState({
			selectTypes,
			selectVal:selectTypes[0].dictName,
			selectKey:selectTypes[0].dictKey
		})
	}

	//点击显示隐藏
	_showVisible = () => {
		this.setState({
			modalSelect: !this.state.modalSelect
		})
	}

	_itemFn = (sendObj, index) => {
		this.setState({
			modeIndex: index,
			selectVal: sendObj.dictName ,
			selectKey: sendObj.dictKey
		}, ()=>{
			this._showVisible();
		});
	}

	render () {
		const {modalSelect,selectTypes,selectVal,selectKey} =this.state
		const { visible, btnPress, closePress, data } = this.props;
		const { remark, reasonName, checkDay, overdueDay } = data || {};
		this.delayDay = overdueDay;
		return (
			<Modal animationType={"fade"}
				transparent={true}
				visible={visible}
				onRequestClose={() => {}}>
				<View style={styles.refuseModal}>
					<TouchableOpacity activeOpacity={1} style={styles.top}>
					</TouchableOpacity>
					<View style={styles.refuseBox}>
						<View style={styles.refuseCell}>
							<View style={styles.modelTitle}>
								<Text style={styles.title}>提示</Text>
								<TouchableOpacity activeOpacity={0.8} onPress={() => closePress()}>
									<Image source={require('../../../../../imgs/close.png')} style={styles.closeIcon} />
								</TouchableOpacity>
							</View>
							<View style={styles.alertBoxTable} zIndex={100} >
								<View><Text style={styles.alertText}>延期原因</Text></View>
								<View style={styles.alertBox}>
                                {
									selectTypes.map((item, index) => {
										return (
											<TouchableOpacity key={index} onPress={() => this._itemFn(item, index)} style={styles.selectItem}>
												<View style={styles.criclebox}>
													{this.state.modeIndex===index?
														<View style={styles.cricleSelect}>
														</View>
													:null
													}
												</View>
												<Text style={styles.selectText}>{item.dictName}</Text>
											</TouchableOpacity>
										)
									})
								}
								</View>
							</View>
							<View style={[styles.items, { marginBottom: 0 }]}>
								<Text style={styles.label}>延期天数</Text>
								<View style={{ flex: 2, flexDirection: 'row', alignItems: 'center' }}>
									<TextInput
										style={styles.delayInput}
										defaultValue={overdueDay+''}
										keyboardType='numeric'
										underlineColorAndroid='transparent'
										returnKeyType='done'
										onChangeText={(txt) => this.delayDay = txt} />
									<Text style={styles.text}>天</Text>
								</View>
							</View>
							<View style={[styles.items, { justifyContent: 'flex-end' }]}>
								<Text style={styles.tip}>当前订单需要延期最小单位 {overdueDay} 天</Text>
							</View>
							<View style={styles.items}>
								<Text style={styles.label}>备注</Text>
								<Text style={styles.text}>APP操作延期</Text>
							</View>
							<View style={{alignItems:'center'}}>
							<TouchableOpacity activeOpacity={0.5} style={styles.refuseBtn} onPress={() => {
								btnPress(this.delayDay,selectKey);
							}}>
								<Text style={styles.refuseBtnText}>确认延期</Text>
							</TouchableOpacity>
							</View>
						</View>
					</View>
					{/* <TouchableOpacity activeOpacity={1} style={styles.bottom}>
					</TouchableOpacity> */}
				</View>
			</Modal >
		);
	}
}

const styles = StyleSheet.create({
	text: {
		flex: 2,
		fontSize: 14 * scale,
		color: '#000',
		fontWeight: '600'
	},
	texts:{
		fontSize: 14 * scale,
		color: '#000',
	},
	refuseBtn: {
		justifyContent: 'center',
		alignItems: 'center',
		width: 120 * scale,
		height: 30 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 6,
		marginBottom: 14 * scale,
		marginTop: 14 * scale,
		// marginLeft: 61 * scale
	},
	refuseBtnText: {
		fontSize: 12 * scale,
		fontWeight: '600',
		color: '#fff'
	},
	refuseModal: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		alignItems: 'center',
	},
	top: {
		height: 150 * scale,
		width: 375 * scale,
		backgroundColor: 'transparent',
	},
	bottom: {
		width: 375 * scale,
		height: 280 * scale,
		backgroundColor: 'transparent',
	},
	refuseBox: {
		backgroundColor: '#fff',
		borderRadius: 9,
		width: 320 * scale,
		alignItems: 'center',
	},
	refuseCell: {
		width: 280 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 10 * scale,
	},
	modelTitle: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 15 * scale
	},
	title: {
		flex: 1,
		fontSize: 16 * scale,
		fontWeight: '600'
	},
	closeIcon: {
		tintColor: style.color.themeColor,
		width: 14 * scale,
		height: 14 * scale
	},
	tip: {
		fontSize: 12 * scale,
		color: '#D0021B',
	},
	items: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 10 * scale
	},
	alertBoxTable:{
		marginBottom: 10 * scale
	},
	label: {
		flex: 1,
		fontSize: 14 * scale,
		color: '#000',
		marginRight: 18 * scale
	},
	delayInput: {
		borderColor: '#999',
		borderWidth: 1 * scale,
		marginRight: 8 * scale,
		padding: 4 * scale,
		borderRadius: 2 * scale,
		width: 40 * scale,
	},
	alertBox:{	
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-between',
		flexWrap:'wrap'
	},
	selectItem: {
		paddingTop:15 * scale,
		paddingRight:10 * scale,
		flexDirection:"row",
		// justifyContent:"center",
		width:130 * scale,
		// padding: 10 * scale,
		// paddingLeft:0
	},
	selectText: {
		fontSize: 14 * scale
	},
	criclebox:{
		width:15 * scale,
		height:15 * scale,
		borderWidth:1,
		borderColor:'#999',
		borderRadius:20 * scale,
		marginRight:5 * scale,
		justifyContent:'center',
		alignItems:'center'
	},
	cricleSelect:{
		width:7 * scale,
		height:7 * scale,
		backgroundColor:'#28aef4',
		borderRadius:20 * scale,
	}
})